@import io.prediction.examples.stock.BacktestingResult
<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type='text/javascript'>
      google.load('visualization', '1', 
          {'packages':['annotatedtimeline', 'table', 'corechart']});
    </script>
  </head>
  <body>
    <h3>Backtesting Result</h3>
    <div id='overall' style='width:1024px;'></div>

    <div id='t_timeline' style='width: 1024px; height: 360px;'></div>
    <div id='b_timeline' style='width: 1024px; height: 200px;'></div>
    <!-- Event listener only works when served from http server --> 

    <script>
      google.setOnLoadCallback(draw);
      var tChart;
      var bChart;
      
      var rawData; 

      function draw() {
        var jsonData = $.ajax({
          url: 'evaluator_results.json',
          dataType: 'json',
          async: false,
        }).responseText; 

        rawData = JSON.parse(jsonData);

        drawOverall();
        drawTimeline();
      }

      function drawOverall() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'ret');
        data.addColumn('number', 'vol');
        data.addColumn('number', 'sharpe');
        data.addColumn('number', 'days');

        var overall = rawData.overall;
        data.addRow([overall.ret, overall.vol, overall.sharpe, overall.days]);

        var formatter = new google.visualization.NumberFormat(
          {fractionDigits: 4});
        formatter.format(data, 0); 
        formatter.format(data, 1); 
        formatter.format(data, 2); 

        var overallDiv = document.getElementById('overall');
        var overallTable = new google.visualization.Table(overallDiv);
        overallTable.draw(data, {showRowNumber: false});
      }

      function drawTimeline() {
        var tData = new google.visualization.DataTable();
        tData.addColumn('date', 'Date');
        tData.addColumn('number', 'Nav');
        tData.addColumn('number', 'Market');

        var dailyStats = rawData.daily;
        for (i = 0; i < dailyStats.length; i++) {
          var stat = dailyStats[i];
          var row = [new Date(stat.time), stat.nav, stat.market];
          tData.addRow(row);
        }

        var tTimelineDiv = document.getElementById('t_timeline');
        tChart = new google.visualization.AnnotatedTimeLine(tTimelineDiv);
        tChart.draw(tData, {
          'displayRangeSelector': false,
          'displayZoomButtons': false,
          'scaleType': 'allmaximized',
          'scaleColumns': [0,1],
        });

        var bData = new google.visualization.DataTable();
        bData.addColumn('date', 'Date');
        bData.addColumn('number', 'Position Count');

        var dailyStats = rawData.daily;
        for (i = 0; i < dailyStats.length; i++) {
          var stat = dailyStats[i];
          var row = [new Date(stat.time), stat.positionCount];
          bData.addRow(row);
        }

        var bTimelineDiv = document.getElementById('b_timeline');
        bChart = new google.visualization.AnnotatedTimeLine(bTimelineDiv);
        bChart.draw(bData);

        google.visualization.events.addListener(
        bChart, 'rangechange', lineChartRangeChange);
      }

      function lineChartRangeChange() {
        var newRange = bChart.getVisibleChartRange();
        tChart.setVisibleChartRange(newRange.start, newRange.end);
      } 
    </script>
     
  </body>
</html>
